<template>
  <div id="app">

    <header>
      <div class="container">
        <div class="logo">My Website</div>
        <nav>
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <home-view/>
    <about-view />
  </div>
</template>

<style>
/* 全局样式 */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* 头部样式 */
header {
  background-color: #333;
  color: white;
  padding: 20px;
}

/* 容器样式 */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 网站标志样式 */
.logo {
  font-size: 24px;
  font-weight: bold;
}

/* 导航菜单样式 */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  margin-right: 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
}

/* 全局样式 */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* 尾部样式 */
footer {
  background-color: #333;
  color: white;
  padding: 20px;
}

/* 尾部容器样式 */
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

/* 尾部部分样式 */
.footer-section {
  margin: 10px;
}

/* 标题样式 */
.footer-section h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

/* 列表样式 */
.footer-section ul {
  list-style-type: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 5px;
}

.footer-section ul li a {
  color: white;
  text-decoration: none;
}

.footer-section ul li a:hover {
  text-decoration: underline;
}

/* 版权信息样式 */
.copyright {
  text-align: center;
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
  }

  .footer-section {
    text-align: center;
  }
}
</style>